<template>
  <Dialog title="文件选择" v-model="dialogVisible" width="1000px" height="800px">
    <el-tree-v2
      v-loading="loading"
      :data="list"
      :props="{
        value: 'id',
        label: 'name',
        children: 'children'
      }"
      class="tree-v2"
      show-checkbox
      :item-size="40"
      :expand-on-click-node="true"
      ref="v2treeRef"
      :height="500"
    >
      <template #default="{ node }">
        <el-icon v-if="node.data.type === 1" class="folder-icon"><Folder /></el-icon>
        <span class="node-item" :title="node.label">
          {{ node.label }}
          <span v-if="node.data.type === 1" class="pl-10px">
            （归属机构:{{ node.data.deptName || '--' }}；
          </span>
          <span v-if="node.data.type === 1"> 归属系统:{{ node.data.sysName || '--' }}） </span>
        </span>
      </template>
    </el-tree-v2>
    <template #footer>
      <div class="footer-wrap">
        <div>
          <el-button @click="confirmChose">确定</el-button>
          <el-button @click="dialogVisible = false">关 闭</el-button>
        </div>
      </div>
    </template>
  </Dialog>
</template>
<script setup>
import { getFileTree } from '@/api/develop/file'

const dialogVisible = ref(false)
const open = () => {
  dialogVisible.value = true
  getList()
}
defineExpose({
  open
})

const loading = ref(false)
const list = ref([])
const v2treeRef = ref()

const getList = async () => {
  loading.value = true
  try {
    const data = await getFileTree()
    list.value = data
    v2treeRef?.value?.setCheckedKeys([])
  } finally {
    loading.value = false
  }
}
const emit = defineEmits(['success'])
const confirmChose = () => {
  const result = v2treeRef.value.getCheckedNodes().filter((item) => item.type == '2')
  if (result.length === 0) {
    return ElMessage.warning('请选择文件')
  }
  emit('success', result)

  dialogVisible.value = false
}
</script>
<style lang="scss" scoped>
.footer-wrap {
  display: flex;
  justify-content: end;
}
</style>
